<template>
  <div :class="hasdot ? 'onenumbox onenumboxhasdot' : 'onenumbox'">
    <div
      class="numlist"
      :style="{
        animation: `rolling2-${num} 3s ease forwards`,
      }"
    >
      <div class="numitem" :style="{ color }">0</div>
      <div class="numitem" :style="{ color }">1</div>
      <div class="numitem" :style="{ color }">2</div>
      <div class="numitem" :style="{ color }">3</div>
      <div class="numitem" :style="{ color }">4</div>
      <div class="numitem" :style="{ color }">5</div>
      <div class="numitem" :style="{ color }">6</div>
      <div class="numitem" :style="{ color }">7</div>
      <div class="numitem" :style="{ color }">8</div>
      <div class="numitem" :style="{ color }">9</div>
    </div>
    <div v-if="hasdot" class="dotbox">
      <div class="dot" :style="{ color }">,</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  defineProps({
    num: {
      type: Number,
      required: true,
    },
    hasdot: {
      type: Boolean,
      default: false,
    },
    color: {
      type: String,
      default: '#fff',
    },
  });
</script>
<style lang="scss" scoped>
  .onenumbox {
    height: 26px;
    width: 12px;
    display: inline-block;
    overflow: hidden;
    position: relative;
    text-align: left;

    .numlist {
      position: absolute;
      width: 100%;
      transform: translate3d(0, 0, 0);

      .numitem {
        height: 26px;
        text-align: left;
        font-size: 24px;
        font-family: D-DIN-Bold;

        color: red;
        line-height: 26px;
      }
    }

    .dotbox {
      height: 26px;
      width: 100%;
      position: absolute;

      .dot {
        font-size: 24px;
        font-family: D-DIN-Bold;

        color: #51aeff;
        line-height: 26px;
        text-align: right;
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
  }

  .onenumboxhasdot {
    width: 18px;
  }
</style>
